<template>
	<view class="content">
		<a-demo title="基础使用">
			<pure-navbar title="导航栏" @back="handleBack"></pure-navbar>
		</a-demo>

		<a-demo title="返回按钮">
			<pure-navbar title="导航栏" back @back="handleBack"></pure-navbar>
			<a-gap></a-gap>
			<pure-navbar title="导航栏" back backText="返回" @back="handleBack"></pure-navbar>
			<a-gap></a-gap>
			<pure-navbar title="不自动返回" back backText="返回" @back="handleBack" :autoBack="false"></pure-navbar>
		</a-demo>

		<a-demo title="左/右按钮">
			<pure-navbar title="导航栏" back :leftBtns="leftBtns" :rightBtns="rightBtns" @back="handleBack"></pure-navbar>
			<a-gap></a-gap>
			<pure-navbar title="导航栏" back :leftBtns="leftBtnsNoText" :rightBtns="rightBtnsNoText" @back="handleBack"></pure-navbar>
		</a-demo>

		<a-demo title="按钮功能" desc="需在小程序中查看效果">
			<pure-navbar
				title="导航栏"
				back
				:leftBtns="leftBtnsFunc"
				:rightBtns="rightBtnsFunc"
				@getphonenumber="handleGetPhoneNumber"
				@opensetting="handleOpenSetting"
			></pure-navbar>
		</a-demo>

		<a-demo title="留出胶囊按钮区域" desc="需在小程序中查看效果">
			<pure-navbar
				title="导航栏"
				back
				:leftBtns="leftBtnsFunc"
				:rightBtns="rightBtnsFunc"
				@getphonenumber="handleGetPhoneNumber"
				@opensetting="handleOpenSetting"
				safeMenuButton
			></pure-navbar>
		</a-demo>

		<a-demo title="标题居左">
			<pure-navbar title="导航栏" left @back="handleBack"></pure-navbar>
			<a-gap></a-gap>
			<pure-navbar title="导航栏" back left @back="handleBack"></pure-navbar>
		</a-demo>
	</view>
</template>

<script setup>
import { ref } from 'vue';

// 左侧按钮组
const leftBtns = ref([
	{ icon: '__weizhi_2', text: '位置' },
	{ icon: '__remen', text: '热门' }
]);
const leftBtnsNoText = ref([{ icon: '__weizhi_2' }, { icon: '__remen' }]);
const leftBtnsFunc = ref([{ icon: '__zhanghao', text: '获取用户手机号', props: { 'open-type': 'getPhoneNumber' } }]);

// 右侧按钮组
const rightBtns = ref([
	{ icon: '__dianzan_2', text: '点赞' },
	{ icon: '__zhuanfa_5', text: '转发' }
]);
const rightBtnsNoText = ref([{ icon: '__dianzan_2' }, { icon: '__zhuanfa_5' }]);
const rightBtnsFunc = ref([{ icon: '__shezhi', text: '打开设置', props: { 'open-type': 'openSetting' } }]);

// 返回
function handleBack() {
	uni.showToast({
		title: '点击了返回',
		icon: 'none'
	});
}

// 获取用户手机号
function handleGetPhoneNumber(e, _btn) {
	console.log('获取用户手机号 ->', e, _btn);
}

// 打开设置
function handleOpenSetting(e, _btn) {
	console.log('打开设置 ->', e, _btn);
	console.log(e, _btn);
}
</script>

<style scoped>
.row {
	box-sizing: border-box;
	padding: 15px;
	background: var(--pure-background-element);
	margin: 10px 0;
	border-radius: 4px;
}
</style>
